<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            border: 2px solid red;
            padding: 5px;
            margin: 5px;
        }
        .content{
            width: 400px;
            height: 2000px;
            margin: 50px auto;
            position: relative;
        }
        .content div:nth-of-type(1){
            background: green;
        }
        .content div:nth-of-type(2){
            background: #a4080b;

            /*
            定位 : 强制元素脱离原本的位置,进而出现元素覆盖的情况
            position : 定为 具有某种定为能力
            absolute : 绝对定为 (脱离原本的标准文档流)
                    参考点 : 上一级具有定位能力的起始位置

            relative : 相对定位 (不会脱离原本的标准文档流)
                    参考点 : 自身原本的位置

            fixed : 固定定为 (脱离原本的标准文档流)
                    参考点 : 浏览器窗口本身
            */
            /*position: absolute;*/
            /*position: relative;*/
            /*position: fixed;
            top: 600px;
            right: 60px;*/

            position: absolute;
            top: 0px;
            left: 0px;
        }
        .content div:nth-of-type(3){
            background: #021b97;
        }
    </style>
</head>
<body>
    <div class="content">
        <div>div1</div>
        <div>div2</div>
        <div>div3</div>
    </div>
</body>
</html>